<template>
    <div class="container">
        <div class="item">
            <div class="title-box f fac">
                <div class="title">电影排行榜</div>
            </div>
            <div class="plist f fpj">
                <div class="pmoive f" v-for="item in rank1.slice(0, 4)">
                    <div class="img">
                        <img :src="item.url" alt="">
                        <div class="num f fac fpc">{{ item.index }}</div>
                    </div>
                    <div class="info-box f1 f fv fpj">
                        <div class="name">{{ item.name }}</div>
                        <div class="info">
                            主演：{{ item.actor }}
                        </div>
                        <div class="info">
                            导演：{{ item.director }}
                        </div>
                        <div class="info">
                            简介：{{ item.desc }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="plist f fpj">
                <div class="tmoive f fac fpj" v-for="item in rank1.slice(4)">
                    <div class="f fac">
                        <div>{{ item.index }}.</div>
                        <div class="name">{{ item.name }}</div>
                    </div>
                    <div class="hot">{{ item.hot }}</div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="title-box f fac">
                <div class="title">电视剧排行榜</div>
            </div>
            <div class="plist f fpj">
                <div class="pmoive f" v-for="item in rank2.slice(0, 4)">
                    <div class="img">
                        <img :src="item.url" alt="">
                        <div class="num f fac fpc">{{ item.index }}</div>
                    </div>
                    <div class="info-box f1 f fv fpj">
                        <div class="name">{{ item.name }}</div>
                        <div class="info">
                            主演：{{ item.actor }}
                        </div>
                        <div class="info">
                            导演：{{ item.director }}
                        </div>
                        <div class="info">
                            简介：{{ item.desc }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="plist f fpj">
                <div class="tmoive f fac fpj" v-for="item in rank2.slice(4)">
                    <div class="f fac">
                        <div>{{ item.index }}.</div>
                        <div class="name">{{ item.name }}</div>
                    </div>
                    <div class="hot">{{ item.hot }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>    
    import m1 from "@/assets/1.jpg"
    import m2 from "@/assets/2.jpg"
    import m3 from "@/assets/3.jpg"
    import m4 from "@/assets/4.jpg"
    import t1 from "@/assets/t1.jpg"
    import t2 from "@/assets/t2.jpg"
    import t3 from "@/assets/t3.jpg"
    import t4 from "@/assets/t4.jpg"

    const rank1 = ref([
        { name: '93国际列车大劫案', index: 1, url: m1,  actor: '张涵予 刘德华 黄轩', director: '邱礼涛', desc: '20世纪90年代跨国列车真实案件改编', hot: '44126℃' },
        { name: '长安的荔枝', index: 2, url: m2, actor: '雷佳音 岳云鹏 窦骁', director: '曹盾', desc: '盛唐时期荔枝运输的传奇故事', hot: '39875℃' },
        { name: '潜行', index: 3, url: m3, actor: '刘德华 林家栋 彭于晏', director: '关智耀', desc: '香港卧底警察的生死抉择', hot: '34786℃' },
        { name: '封神第二部', index: 4, url: m4, actor: '费翔 黄渤 于适', director: '乌尔善', desc: '神话史诗封神系列续作', hot: '32542℃' },
        { name: '志愿军：雄兵出击', index: 5, actor: '辛柏青 朱一龙 张子枫', director: '陈凯歌', desc: '抗美援朝战争英雄群像', hot: '31289℃' },
        { name: '消失的凶手', index: 6, actor: '朱一龙 倪妮 文咏珊', director: '崔睿', desc: '东南亚离奇失踪案调查', hot: '29876℃' },
        { name: '热烈', index: 7, actor: '黄渤 王一博 宋祖儿', director: '大鹏', desc: '街舞少年追梦之旅', hot: '28765℃' },
        { name: '八角笼中', index: 8, actor: '王宝强 陈永胜 史彭元', director: '王宝强', desc: '格斗孤儿真实事件改编', hot: '27654℃' },
        { name: '孤注一掷', index: 9, actor: '张艺兴 金晨 咏梅', director: '申奥', desc: '境外诈骗工厂惊魂记', hot: '26543℃' },
        { name: '涉过愤怒的海', index: 10, actor: '黄渤 周迅 祖峰', director: '曹保平', desc: '父亲为女复仇的跨国追凶', hot: '25432℃' },
        { name: '三大队', index: 11, actor: '张译 李晨 魏晨', director: '戴墨', desc: '警察追凶十二年的执着', hot: '24321℃' },
        { name: '年会不能停！', index: 12, actor: '大鹏 白客 庄达菲', director: '董润年', desc: '职场荒诞喜剧', hot: '23210℃' },
        { name: '一闪一闪亮星星', index: 13, actor: '屈楚萧 张佳宁', director: '陈小明', desc: '时空循环爱情故事', hot: '22109℃' },
        { name: '金手指', index: 14, actor: '梁朝伟 刘德华', director: '庄文强', desc: '香港廉政公署反腐风云', hot: '21098℃' },
        { name: '爆裂点', index: 15, actor: '张家辉 陈伟霆', director: '林超贤', desc: '缉毒警察生死对决', hot: '20987℃' },
        { name: '热搜', index: 16, actor: '周冬雨 宋洋 袁弘', director: '忻钰坤', desc: '自媒体时代的舆论战争', hot: '19876℃' },
        { name: '我本是高山', index: 17, actor: '海清 陈永胜', director: '郑大圣', desc: '张桂梅校长办学事迹', hot: '18765℃' },
        { name: '怒潮', index: 18, actor: '张家辉 阮经天', director: '马浴柯', desc: '东南亚黑帮复仇记', hot: '17654℃' },
        { name: '照明商店', index: 19, actor: '章若楠 白宇帆', director: '蔡耳朵', desc: '悬疑惊悚都市传说', hot: '16543℃' },
        { name: '瞒天过海', index: 20, actor: '许光汉 张钧甯', director: '陈卓', desc: '富豪妻子密室失踪案', hot: '15432℃' },
        { name: '敦煌英雄', index: 21, actor: '章宇 窦骁', director: '曹盾', desc: '唐朝西域保卫战', hot: '14321℃' },
        { name: '无价之宝', index: 22, actor: '张译 潘斌龙', director: '张大鹏', desc: '落魄大叔收养弃婴', hot: '13210℃' },
        { name: '拯救嫌疑人', index: 23, actor: '张小斐 李鸿其', director: '张末', desc: '女律师为死刑犯辩护', hot: '12109℃' },
        { name: '再见，李可乐', index: 24, actor: '闫妮 谭松韵', director: '王小列', desc: '宠物狗治愈家庭创伤', hot: '11098℃' },
        { name: '不要走散好不好', index: 25, actor: '徐若晗 张开泰', director: '郑来志', desc: '青春爱情成长故事', hot: '10987℃' },
        { name: '最后的真相', index: 26, actor: '黄晓明 闫妮', director: '李太阁', desc: '律师为妓女翻案', hot: '9876℃' },
        { name: '一个和四个', index: 27, actor: '金巴 王铮', director: '久美成列', desc: '藏地荒野悬疑故事', hot: '8765℃' },
        { name: '普通男女', index: 28, actor: '黄璐 郭涛', director: '刘雨霖', desc: '都市男女情感困境', hot: '7654℃' },
        { name: '最好的相遇', index: 29, actor: '金世佳 邱泽', director: '哈智超', desc: '特殊群体爱情故事', hot: '6543℃' },
        { name: '二手杰作', index: 30, actor: '于和伟 郭麒麟', director: '王子昭', desc: '父子代笔文学闹剧', hot: '5432℃' },
        { name: '困兽', index: 31, actor: '钟汉良 吴镇宇', director: '彭发', desc: '赌城扫黑风暴', hot: '4321℃' },
        { name: '好像也没那么热血沸腾', index: 32, actor: '魏翔 王智', director: '高虎', desc: '篮球教练特教学校奇遇', hot: '3210℃' },
        { name: '坚如磐石', index: 33, actor: '雷佳音 张国立', director: '张艺谋', desc: '扫黑除恶反腐斗争', hot: '2198℃' },
        { name: '前任4：英年早婚', index: 34, actor: '韩庚 郑恺', director: '田羽生', desc: '都市男女婚恋观察', hot: '1987℃' },
        { name: '莫斯科行动', index: 35, actor: '张涵予 刘德华', director: '邱礼涛', desc: '中俄列车大劫案侦破', hot: '1876℃' },
        { name: '检察风云', index: 36, actor: '黄景瑜 白百何', director: '麦兆辉', desc: '检察官扫黑除恶', hot: '1765℃' },
        { name: '我爱你！', index: 37, actor: '倪大红 惠英红', director: '韩延', desc: '老年人黄昏恋故事', hot: '1654℃' },
        { name: '学爸', index: 38, actor: '黄渤 闫妮', director: '苏亮', desc: '家长教育焦虑实录', hot: '1543℃' },
        { name: '暗杀风暴', index: 39, actor: '古天乐 张智霖', director: '邱礼涛', desc: '香港连环杀人案', hot: '1432℃' },
        { name: '超能一家人', index: 40, actor: '艾伦 沈腾', director: '宋阳', desc: '喜剧超能力家庭闹剧', hot: '1321℃' }
    ])

    const rank2 = ref([
        { name: '折腰', index: 1, url: t1,  actor: '宋祖儿 刘宇宁 宣璐 刘端端 刘晓庆 何泓姗', director: '邓科', desc: '乱世中，经历失去父兄之痛的魏劭励精图治', hot: '44126℃' },
        { name: '五福临门', index: 2, url: t2, actor: '倪虹洁 卢昱晓 王星越 梁永棋 柯颖 吴宣仪', director: '杨欢 白云默 马诗', desc: '北宋仁宗年间，汴京物阜民丰，声名远', hot: '39875℃' },
        { name: '大奉打更人', index: 3, url: t3, actor: '王鹤棣 田曦薇 刘奕君 晏紫东 岳旸 张晓晨', director: '邓科', desc: '现代打工人杨凌，意外进入到充满玄幻色彩', hot: '34786℃' },
        { name: '永夜星河', index: 4, url: t4, actor: '虞书欣 丁禹兮 祝绪丹 杨仕泽', director: '赵一龙', desc: '讲述元气女主凌妙妙意外绑定系统，接受任', hot: '32542℃' },
        { name: '与凤行', index: 5, actor: '赵丽颖 林更新 辛云来 何与 李嘉琦 曾黎', director: '邓科', desc: '上古神君行止与魔界女王爷沈璃的爱情故事', hot: '31289℃' },
        { name: '长相思2', index: 6, actor: '杨紫 张晚意 邓为 檀健次 王弘毅', director: '秦榛', desc: '小夭与玱玹、涂山璟、相柳的宿命纠葛', hot: '29876℃' },
        { name: '狐妖小红娘月红篇', index: 7, actor: '杨幂 龚俊 郭晓婷 魏哲鸣 胡连馨 温峥嵘', director: '杜林', desc: '涂山狐族与道门世家的千年羁绊', hot: '28765℃' },
        { name: '庆余年2', index: 8, actor: '张若昀 李沁 陈道明 吴刚 郭麒麟 宋轶', director: '孙皓', desc: '范闲在京都继续书写传奇人生', hot: '27654℃' },
        { name: '凡人修仙传', index: 9, actor: '杨洋 金晨 赵今麦 王彦霖', director: '林玉芬', desc: '山村少年韩立的修仙成长之路', hot: '26543℃' },
        { name: '英雄志', index: 10, actor: '成毅 李一桐 王千源 郑业成', director: '尹涛', desc: '四位主角在乱世中的命运交织', hot: '25432℃' },
        { name: '流水迢迢', index: 11, actor: '任嘉伦 李兰迪 徐正溪 高寒', director: '周靖韬', desc: '权谋与爱情交织的古装传奇', hot: '24321℃' },
        { name: '七夜雪', index: 12, actor: '李沁 曾舜晞 王弘毅', director: '李木戈', desc: '药师薛紫夜与杀手霍展白的虐恋', hot: '23210℃' },
        { name: '度年华', index: 13, actor: '张凌赫 赵今麦', director: '朱锐斌', desc: '长公主重生改变命运的故事', hot: '22109℃' },
        { name: '水龙吟', index: 14, actor: '罗云熙 林允', director: '陈家霖', desc: '异族王子卷入中原纷争', hot: '21098℃' },
        { name: '颜心记', index: 15, actor: '罗云熙 宋轶', director: '于中中', desc: '脸盲症王爷与江湖游医的爱情', hot: '20987℃' },
        { name: '四方馆', index: 16, actor: '檀健次 周依然', director: '郭虎', desc: '外交官在四方馆的传奇故事', hot: '19876℃' },
        { name: '国色芳华', index: 17, actor: '杨紫 李现', director: '丁梓光', desc: '商贾之女培育稀世牡丹的传奇', hot: '18765℃' },
        { name: '子夜归', index: 18, actor: '许凯 田曦薇', director: '林玉芬', desc: '捉妖师与半妖少女的奇幻爱情', hot: '17654℃' },
        { name: '锦绣安宁', index: 19, actor: '张晚意 任敏', director: '陈家霖', desc: '侯府嫡女与寒门将才的成长史', hot: '16543℃' },
        { name: '珠帘玉幕', index: 20, actor: '赵露思 刘宇宁', director: '朱锐斌', desc: '采珠少女的商海沉浮录', hot: '15432℃' },
        { name: '凤凰台上', index: 21, actor: '张雪迎 辛云来', director: '李木戈', desc: '宫廷乐师与将军之女的爱情', hot: '14321℃' },
        { name: '千香引', index: 22, actor: '宋威龙 鞠婧祎', director: '郭虎', desc: '修仙门派中的成长与阴谋', hot: '13210℃' },
        { name: '白月梵星', index: 23, actor: '白鹿 敖瑞鹏', director: '朱锐斌', desc: '药师少女与将军的奇幻情缘', hot: '12109℃' },
        { name: '九重紫', index: 24, actor: '孟子义 李昀锐', director: '尹涛', desc: '重生嫡女智斗宅院阴谋', hot: '11098℃' },
        { name: '春花厌', index: 25, actor: '吴谨言 王星越', director: '郭虎', desc: '杀手与权臣之女的虐恋', hot: '10987℃' },
        { name: '千朵桃花一世开', index: 26, actor: '张婧仪 周翊然', director: '朱锐斌', desc: '仙门师徒的禁忌之恋', hot: '9876℃' },
        { name: '柳舟记', index: 27, actor: '张晚意 王楚然', director: '刘国楠', desc: '商贾之女与寒门书生的爱情', hot: '8765℃' },
        { name: '献鱼', index: 28, actor: '陈飞宇 周也', director: '李木戈', desc: '修仙世界的奇幻冒险', hot: '7654℃' },
        { name: '蜀锦人家', index: 29, actor: '谭松韵 郑业成', director: '于中中', desc: '蜀锦世家的商战传奇', hot: '6543℃' },
        { name: '千山记', index: 30, actor: '李兰迪 王星越', director: '周靖韬', desc: '宫廷女官的权谋之路', hot: '5432℃' },
        { name: '风月锦囊', index: 31, actor: '胡一天 章若楠', director: '郭虎', desc: '捕快与仵作联手破案', hot: '4321℃' },
        { name: '长安秘案录', index: 32, actor: '张凌赫 王玉雯', director: '李木戈', desc: '大理寺少卿的探案传奇', hot: '3210℃' },
        { name: '风月变', index: 33, actor: '吕小雨 赵弈钦', director: '曾庆杰', desc: '花魁与将军的乱世情缘', hot: '2198℃' },
        { name: '焕羽', index: 34, actor: '张婧仪 周翊然', director: '刘畅', desc: '青春校园的成长故事', hot: '1987℃' },
        { name: '锦月如歌', index: 35, actor: '周也 王星越', director: '朱锐斌', desc: '将门之女的战场传奇', hot: '1876℃' },
        { name: '藏海传', index: 36, actor: '肖战 张婧仪', director: '郑晓龙', desc: '宫廷画师的复仇之路', hot: '1765℃' },
        { name: '逍遥', index: 37, actor: '胡歌 刘诗诗', director: '李国立', desc: '仙侠世界的爱恨情仇', hot: '1654℃' },
        { name: '白荆回廊', index: 38, actor: '陈哲远 李一桐', director: '林玉芬', desc: '异世界冒险之旅', hot: '1543℃' },
        { name: '大梦归离', index: 39, actor: '侯明昊 程潇', director: '郭敬明', desc: '玄幻世界的命运纠葛', hot: '1432℃' },
        { name: '入青云', index: 40, actor: '杨超越 丁禹兮', director: '朱锐斌', desc: '仙门弟子的成长史诗', hot: '1321℃'}
    ])

    
</script>

<style lang="scss" scoped>
    .container {
        width: 80%;
        padding-top: 40px;
        .item {
            margin-bottom: 30px;
            .title-box {
                .title {
                    font-size: 24px;
                    padding-bottom: 8px;
                    border-bottom: 4px solid var(--el-color-primary);
                }
            }
            .plist {
                margin-top: 24px;
                width: 100%;
                flex-wrap: wrap;
                .pmoive {
                    width: 24%;
                    .img {
                        position: relative;
                        width: 110px;
                        height: 143px;
                        margin-right: 4px;
                        .num {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 25px;
                            height: 25px;
                            color: #000;
                            background-color: var(--el-color-primary);
                        }
                    }
                    .info-box {
                        .name {
                            font-size: 18px;
                            color: #202E31;
                            cursor: pointer;
                            &:hover {
                                color: var(--el-color-primary);
                                text-decoration: underline;
                            }
                        }
                        .info {
                            color: #666;
                        }
                    }
                    
                }
                .tmoive {
                    width: 24%;
                    padding: 8px 0;
                    border-bottom: 1px solid #ddd; 
                    cursor: pointer;
                    .name {
                        margin-left: 12px;
                        &:hover {
                            color: var(--el-color-primary);
                            text-decoration: underline;
                        }
                    }
                    .hot {
                        color: var(--el-color-primary);
                    }
                }
               
                
            }
        }
    }
</style>